<template>
  <div id="appBaseDiv" style="width: 100%;height: 100%;position: fixed;left: 0;top: 0;" :style="{
    opacity: prepared ? 1 : 0,
  }">
    <div style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;" :style="{
      zoom
    }">
      <settings></settings>
      <controls></controls>
      <RouterView v-if="prepared" style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;"></RouterView>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, defineProps, computed, watch, onMounted, onBeforeUnmount } from 'vue'
import tool from './tool'
import { RouterView } from 'vue-router';
import controls from './controls/controls.vue'
import settings from './settings/settings.vue'

//初始化路由
import { useRouter } from 'vue-router';
const router = useRouter()
tool.store.onChange('router_push', (e) => router.push(e))

const prepared = ref(false)

const zoom = ref(1)

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
  const darkModeOn = e.matches
  tool.store.setItem('darkMode', darkModeOn ? true : undefined)
})
tool.store.setItem('darkMode', window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)

onMounted(async () => {
  tool.store.onChange('zoom', (e) => {
    zoom.value = e
  })
  tool.store.onChange('windowWidth', (e) => {
    if (e < 768) {
      tool.store.setItem('windowStatus', 0)
    } else {
      tool.store.setItem('windowStatus', 1)
    }
  })
  const set = () => {
    tool.store.setItem('windowHeight', document.getElementById('appBaseDiv').clientHeight)
    tool.store.setItem('windowWidth', document.getElementById('appBaseDiv').clientWidth)
    tool.store.setItem('zoom', document.getElementById('appBaseDiv').clientWidth < 768 ? (document.getElementById('appBaseDiv').clientWidth / 375) : 1)
    tool.store.setItem('isMobile', document.getElementById('appBaseDiv').clientWidth < 768 ? true : false)
  }
  set()
  tool.store.onChange('updateWindowInfo', () => set())
  window.addEventListener('resize', set);
  router.afterEach(async ()=>{
    set()
    await tool.wait(0.1)
    set()
  })
  prepared.value = true
  setTimeout(() => {
    set()
  }, 100);
  setTimeout(() => {
    set()
  }, 200);
  setTimeout(() => {
    set()
  }, 1000);
  setTimeout(() => {
    set()
  }, 2000);
  setTimeout(() => {
    set()
  }, 5000);
  setTimeout(() => {
    set()
  }, 10000);
})

</script>

<style scoped></style>